<template>
  <div class="container">
    <div class="nav">
      <div class="logo-container" @click="$router.replace('/')">
        <a><i class="iconfont icon-sun"></i> <span>新中地天气</span></a>
      </div>
      <div class="weather-container">
        <div class="city">{{ localCity }}</div>
        <div class="weather">实时天气：{{ weather }}{{ temperature }}℃</div>
        <div class="wind">{{ winddirection }}风{{ windpower }}级</div>
      </div>
      <div class="icon-container">
        <i class="iconfont icon-a-symbol-circle-info-filled-info2"></i>
        <i class="iconfont icon-plus1" @click="setAdCode"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { requestWeatherLiveByCode, requestCodeByIp } from "@/api/request";
export default {
  name: "TopNav",
  data() {
    return {
      localCity: "",
      weather: "",
      temperature: "",
      winddirection: "",
      windpower: "",
    };
  },
  methods: {
    async getLocalLiveWeather() {
      const res = await requestCodeByIp();
      this.localCity = res.city;
      //this.localCode = res.adcode;
      const result = await requestWeatherLiveByCode(res.adcode);
      this.weather = result.lives[0].weather;
      this.temperature = result.lives[0].temperature;
      this.winddirection = result.lives[0].winddirection;
      this.windpower = result.lives[0].windpower;
    },
    setAdCode() {
      if (localStorage.length == 0) {
        const arr = [];
        const obj = {
          cityName: this.$store.state.cityName,
          adCode: this.$store.state.adCode,
        }
        arr.push(obj)
        localStorage.setItem("savedCity", JSON.stringify(arr));
      } else {
        for (let i = 0; i < localStorage.length; i++) {
          console.log(localStorage.key(i));
          if (localStorage.key(i) == "savedCity") {
            const cityObj = {
              cityName: this.$store.state.cityName,
              adCode: this.$store.state.adCode,
            };
            const savedCities = JSON.parse(localStorage.getItem('savedCity')) || [];
            savedCities.push(cityObj);
            localStorage.setItem('savedCity', JSON.stringify(savedCities));
          }
        }
      }
    },
  },
  mounted() {
    this.getLocalLiveWeather();
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 80px;
  padding: 24px 160px;
  box-sizing: border-box;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
}
.nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.logo-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  font-size: 24px;
}
.weather-container {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;
  align-items: center;
}
.icon-container {
  display: flex;
  flex: 1 1 0%;
  gap: 0.75rem;
  justify-content: flex-end;
}
.iconfont {
  font-size: 24px;
  margin: 0 5px;
}
.city {
  font-size: 18px;
}
.weather,
.wind {
  font-size: 14px;
}
.icon-a-symbol-circle-info-filled-info2 {
  transition: color 1s ease;
}
.icon-a-symbol-circle-info-filled-info2:hover,
.icon-plus1:hover {
  color: rgb(0, 78, 113);
}
.icon-plus1 {
  transition: color 0.25s ease;
}
</style>
